<template>
	<div class="p-4">
		<header class="flex flex-col lg:flex-row justify-between items-center my-2">
			<div class="flex w-full lg:w-auto items-center justify-between">
				<a href="/" class="text-lg">
					<img class="h-12" src="https://cdn.mzyun.tech/logo_black.png" />
				</a>
				<div class="block lg:hidden">
					<button @click="open = !open" class="text-gray-800">
						<svg fill="currentColor" class="w-4 h-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
							<title>Menu</title>
							<path v-show="open" fill-rule="evenodd" clip-rule="evenodd"
								d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z">
							</path>
							<path v-show="!open" fill-rule="evenodd"
								d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z">
							</path>
						</svg>
					</button>
				</div>
			</div>
			<nav class="w-full lg:w-auto mt-2 lg:flex lg:mt-0" :class="{ block: open, hidden: !open }">
				<ul class="flex flex-col lg:flex-row lg:gap-3">
					<li v-for="item of menuitems">
						<a :href="item.path" class="flex lg:px-3 py-2 text-gray-600 hover:text-gray-900">
							{{ item.title }}
						</a>
					</li>
				</ul>
				<div class="lg:hidden flex items-center mt-3 gap-4">
					<client-only>
						<el-button v-if="!store.isLogin" type="primary" @click="showLogin = true">登录/注册</el-button>
					</client-only>
				</div>
			</nav>
			<div>
				<div class="hidden lg:flex items-center gap-4">
					<client-only>
						<el-button v-if="!store.isLogin" type="primary" @click="showLogin = true">登录/注册</el-button>
						<el-dropdown v-else class="ml-2">
							<el-avatar :src="store.userInfo.avatar" style="outline: none;"></el-avatar>
							<template #dropdown>
								<div class="w-96 rounded-xl bg-white p-4">
									<div class="flex items-center">
										<el-avatar class="mr-2 cursor-pointer" :src="store.userInfo.avatar"></el-avatar>
										<div>{{ store.userInfo.nickname }}</div>

									</div>
									<div class="rounded-xl my-4 overflow-hidden">
										<div class="bg-gray-500  text-xl font-bold text-white p-4 ">
											免费版-个人
										</div>
										<div class="bg-gray-100 p-4 flex justify-between">
											<div class="text-md font-bold">
												会员功能暂未开通
											</div>
											<!-- <el-button>开通会员</el-button> -->

										</div>
									</div>
									<div class="mb-4 cursor-pointer" @click="router.push('/account/settings')">账号设置
									</div>

									<div class="cursor-pointer" @click="store.logout()">退出登录</div>
								</div>
							</template>
						</el-dropdown>
					</client-only>
				</div>
			</div>
		</header>
		<slot />
		<client-only>
			<contact />
			<el-dialog v-model="showLogin" top="10vh" style="background-color: transparent;" :width="matchMedia('(max-width:767px)')?'100%':'700px'">
				<login @close="showLogin = false"></login>
			</el-dialog>
		</client-only>


		<LandingFooter />



	</div>
</template>
<script setup>
const router = useRouter()
const menuitems = [
	{
		title: "首页",
		path: "/",
	},
	{
		title: "智能抠图",
		path: "/koutu",
	},
	// {
	// 	title: "AI设计",
	// 	path: "/ai/design",
	// },
	{
		title: "AI绘图",
		path: "/ai/image",
	},
	{
		title: "AI文案",
		path: "/ai/writer",
	},
	{
		title: "虚拟人",
		path: "/ai/human",
	},
	{
		title: "在线PS",
		path: "https://ps.55ai.store?lang=zh",
	},
];

const open = ref(false);


const store = useUserStore();
const showLogin = ref(false);
provide('showLogin', showLogin)

// 判断屏幕宽度调整登录框大小
const matchMedia = (media) => {
	return window.matchMedia(media).matches;
};


</script>
<style></style>